<template>
  <div class="selimg-container">
    <!-- 选择图片=》显示 -->
    <div class="sel-box" @click="isShow = true">
      <el-image :src="imgUrl">
        <!-- 默认没有url，使用错误提示slot作为选择素材的文案 -->
        <div slot="error" class="image-slot">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </div>
      </el-image>
    </div>
    <!-- 选择图片 -->
    <el-dialog
      title="选择封面"
      append-to-body
      :visible.sync="isShow"
      width="68%"
    >
      <!-- 开启选择功能 -->
      <Imgs isSel @selected="onSeled" />
    </el-dialog>
  </div>
</template>

<script>
import Imgs from '@/views/image'
export default {
  components: {
    Imgs
  },
  props: {
    // 父组件传递的图片url
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 选中的图片素材
      // seledImg: '',
      // 控制弹层显示
      isShow: false
    }
  },
  methods: {
    onSeled (seled) {
      // // 保存选中值
      // this.seledImg = seled
      // 关闭选择窗口
      this.isShow = false
      // 同步数据到父组件=》发布文章中
      this.$emit('update:imgUrl', seled)
    }
  }
}
</script>

<style lang="less" scoped>
.sel-box {
  .el-image {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid #eee;
    /deep/ .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      cursor: pointer;
      i {
        font-size: 24px;
        color: #333;
      }
    }
  }
}
</style>
